<!DOCTYPE html>
<html lang="en">

<head>
    <title>Action Tables | Tables</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="Thu, 19 Nov 1900 08:52:00 GMT">
    <link rel="shortcut icon" href="../../static/madmin/images/icons/favicon.ico">
    <link rel="apple-touch-icon" href="../../static/madmin/images/icons/favicon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="../../static/madmin/images/icons/favicon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="../../static/madmin/images/icons/favicon-114x114.png">
    <!--Loading bootstrap css-->
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700">
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700,300">
    <link type="text/css" rel="stylesheet" href="../../static/madmin/vendors/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css">
    <link type="text/css" rel="stylesheet" href="../../static/madmin/vendors/font-awesome/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="../../static/madmin/vendors/bootstrap/css/bootstrap.min.css">
    <!--LOADING STYLESHEET FOR PAGE-->
    <!--Loading style vendors-->
    <link type="text/css" rel="stylesheet" href="../../static/madmin/vendors/animate.css/animate.css">
    <link type="text/css" rel="stylesheet" href="../../static/madmin/vendors/jquery-pace/pace.css">
    <link type="text/css" rel="stylesheet" href="../../static/madmin/vendors/iCheck/skins/all.css">
    <link type="text/css" rel="stylesheet" href="../../static/madmin/vendors/jquery-notific8/jquery.notific8.min.css">
    <link type="text/css" rel="stylesheet" href="../../static/madmin/vendors/bootstrap-daterangepicker/daterangepicker-bs3.css">
    <!--Loading style-->
    <link type="text/css" rel="stylesheet" href="../../static/madmin/css/themes/style1/orange-blue.css" class="default-style">
    <link type="text/css" rel="stylesheet" href="../../static/madmin/css/themes/style1/orange-blue.css" id="theme-change" class="style-change color-change">
    <link type="text/css" rel="stylesheet" href="../../static/madmin/css/style-responsive.css">
    <script type="text/javascript" src="../../static/angularjs/angular.min.js"></script>
</head>

<body class=" ">
      <div class="row">
          <div class="col-lg-12">
              <h4 class="box-heading">卡密库信息</h4>
              <div class="table-container" ng-controller="cardController">
                  <table class="table table-hover table-striped table-bordered table-advanced tablesorter">
                      <thead>
                          <tr>
                              <th width="3%">
                                  <div style="position: relative;" class="icheckbox_minimal-grey">
                                  <input style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;" class="checkall" type="checkbox">
                                  <ins style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;" class="iCheck-helper"></ins></div>
                              </th>
                              <th width="9%">Record #</th>
                              <th>编号</th>
                              <th width="10%">卡密码</th>
                              <th width="10%">入库时间</th>
                              <th width="7%">出库时间</th>
                              <th width="12%">状态</th>
                              <th width="10%">商品编号</th>
                              <th width="9%">Status</th>
                              <th width="12%">Actions</th>
                          </tr>
                          </thead>
                          <tbody>
                              <tr ng-repeat="card in cards">
                                  <td>
                                      <div style="position: relative;" class="icheckbox_minimal-grey"><input style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;" type="checkbox"><ins style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;" class="iCheck-helper"></ins></div>
                                  </td>
                                  <td>{{card.id}}</td>
                                  <td>{{card.cardm}}</td>
                                  <td>{{card.in_date}}</td>
                                  <td>{{card.out_date}}</td>
                                  <td>{{card.status}}</td>
                                  <td>{{card.good_id}}</td>
                                  <td>$240.50</td>
                                  <td><span class="label label-sm label-success">Approved</span>
                                  </td>
                                  <td>
                                      <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                      </button>
                                  </td>
                              </tr>
                          </tbody>
                  </table>
                  <div class="row">
                      <div class="col-lg-6">
                          <div class="pagination-panel">Page &nbsp;
                              <a href="#" class="btn btn-sm btn-default btn-prev"><i class="fa fa-angle-left"></i></a>&nbsp;
                              <input maxlenght="5" value="1" class="pagination-panel-input form-control input-mini input-inline input-sm text-center" type="text">&nbsp;<a href="#" class="btn btn-sm btn-default btn-prev"><i class="fa fa-angle-right"></i></a>&nbsp; of 6 | View &nbsp;
                              <select class="form-control input-xsmall input-sm input-inline">
                                  <option value="20" selected="selected">20</option>
                                  <option value="50">50</option>
                                  <option value="100">100</option>
                                  <option value="150">150</option>
                                  <option value="-1">All</option>
                              </select>&nbsp; 总计200条记录</div>
                      </div>
                      <div class="col-lg-6 text-right">
                          <div class="pagination-panel">
                              <ul class="pagination pagination-sm man">
                                  <li><a href="#">«</a>
                                  </li>
                                  <li><a href="#">1</a>
                                  </li>
                                  <li><a href="#">2</a>
                                  </li>
                                  <li><a href="#">3</a>
                                  </li>
                                  <li><a href="#">4</a>
                                  </li>
                                  <li><a href="#">5</a>
                                  </li>
                                  <li><a href="#">»</a>
                                  </li>
                              </ul>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
</body>

<script type="text/javascript">
function cardController($scope, $http) {
	  $http.get('<%=request.getContextPath()%>/card/getOrder').success(function(data) {
	    $scope.cards = data;
	  });
	}
</script>

</html>